<template>
  <div>
    <div class="login-container">
      <a-form :form="loginForm" @submit="loginSubmit">
        <a-form-item>
          <a-input
            v-decorator="[
              'username',
              { rules: [{ required: true, message: '请输入用户名' }] }
            ]"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码' }] }
            ]"
            placeholder="请输入密码"
            type="password"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block>登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import userApi from '@/api/user'
import md5 from 'js-md5'
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      loginForm: this.$form.createForm(this)
    }
  },
  methods: {
    loginSubmit(e) {
      e.preventDefault()
      // eslint-disable-next-line handle-callback-err
      this.loginForm.validateFields((err, values) => {
        values.password = md5(values.password)
        userApi.login(values).then(res => {
          this.$message.info(res.msg)
          this.$store.commit('SET_USER', res.data.user)
          setToken(res.data.token)
          this.$router.push('/')
        })
      })
    }
  }
}
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 15px !important;
}
</style>
